<template>
  <div class="BMIListComponent">
    <h2>{{ title }}</h2>
    <table class="list">
      <tr>
        <th>#</th>
        <th>日期</th>
        <th>身高</th>
        <th>体重</th>
        <th>BMI</th>
        <th>操作</th>
      </tr>
      <tbody v-if="bmiList.length === 0">
      <tr>
        <td colspan="6">暂无数据</td>
      </tr>
      </tbody>
      <tbody v-else>
        <ListItemComponent
          v-for="(item, index) in bmiList"
          :key="index"
          :index="index + 1"
          :item="item"
          :delete-item="del"
        />
      </tbody>
    </table>
  </div>
</template>

<script>
import ListItemComponent from "@/components/ListItemComponent";

export default {
  name: "BMIListComponent",
  components: {
    ListItemComponent
  },
  props: {
    title: {
      type: String,
      default: 'BMI记录列表'
    },
    bmiList: {
      type: Array,
      required: false,
      default: () => []
      // default: () => ({})
      // default: [] {},
    },
    del: {
      type: Function,
      required: true,
    }
  },
  data() {
    return {
      // bmiList: []
    }
  },
  methods: {

  }
}
</script>

<style>
.BMIListComponent {
  width: 1000px;
  margin: 0 auto;
}

.BMIListComponent .list {
  width: 100%;
  border-collapse: collapse;
}

.BMIListComponent .list tr th,
.BMIListComponent .list tr td {
  border: 1px solid #2c3e50;
  padding: 10px 20px;
}
</style>
